<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表渲染测试</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #0c1426;
            color: white;
            font-family: Arial, sans-serif;
        }
        .chart-container {
            width: 100%;
            height: 600px;
            border: 1px solid #1a3c58;
            border-radius: 8px;
            background: rgba(7, 19, 50, 0.6);
        }
        .test-info {
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(7, 19, 50, 0.8);
            border-radius: 8px;
        }
        .debug-info {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 0, 0, 0.1);
            border-radius: 8px;
            border: 1px solid #ff4444;
        }
    </style>
</head>
<body>
    <div class="test-info">
        <h2>气象负荷时间序列图表渲染测试</h2>
        <p>测试ECharts是否能正常渲染五个曲线：平均负荷、最高气温、最低气温、降水量、相对湿度</p>
        <p>使用真实API数据格式</p>
    </div>
    
    <div id="testChart" class="chart-container"></div>
    
    <div class="debug-info">
        <h3>调试信息</h3>
        <div id="debugOutput"></div>
    </div>

    <script>
        // 模拟API返回的真实数据
        const apiData = {
            "success": true,
            "data": {
                "correlation_analysis": {
                    "temp_max": {
                        "pearson_correlation": 0.818,
                        "impact_level": "强相关",
                        "description": "最高温度与负荷呈正相关，温度升高时负荷增加"
                    },
                    "temp_min": {
                        "pearson_correlation": 0.888,
                        "impact_level": "强相关",
                        "description": "最低温度与负荷呈正相关，但影响程度略低于最高温度"
                    },
                    "precip": {
                        "pearson_correlation": -0.147,
                        "impact_level": "弱相关",
                        "description": "降水量对负荷影响较小，雨天可能略微降低负荷"
                    },
                    "humidity": {
                        "pearson_correlation": -0.786,
                        "impact_level": "强相关",
                        "description": "湿度与负荷呈负相关，高湿度时负荷可能降低"
                    }
                },
                "time_series": {
                    "dates": ["06-20", "06-21", "06-22", "06-23", "06-24", "06-25", "06-26", "06-27", "06-28", "06-29", "06-30", "07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11", "07-12", "07-13", "07-14", "07-15", "07-16", "07-17", "07-18", "07-19"],
                    "temp_max": [28.19, 29.67, 29.78, 31.32, 31.31, 31.59, 31.25, 34.65, 33.70, 30.52, 31.09, 31.89, 30.14, 30.57, 28.13, 27.32, 27.52, 25.14, 24.66, 21.44, 23.77, 20.55, 24.64, 22.75, 23.93, 24.01, 24.53, 24.68, 26.34, 26.28],
                    "temp_min": [22.48, 20.48, 24.30, 25.13, 25.10, 26.24, 26.81, 26.13, 28.77, 26.81, 26.64, 27.13, 23.71, 23.51, 22.11, 20.35, 19.78, 19.67, 18.74, 18.48, 17.08, 17.86, 14.56, 16.47, 17.71, 16.84, 17.76, 19.41, 20.85, 20.09],
                    "precip": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.69, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
                    "humidity": [66.79, 64.75, 66.66, 67.39, 61.06, 64.66, 62.93, 59.18, 60.17, 60.08, 58.26, 69.76, 56.78, 66.21, 69.08, 75.95, 73.48, 86.38, 76.68, 80.30, 82.69, 77.20, 82.88, 83.32, 76.85, 80.23, 77.48, 73.21, 79.60, 67.02],
                    "load": [44657.62, 46223.62, 45653.93, 46907.51, 47049.71, 46450.28, 48621.33, 45613.68, 48297.08, 46230.52, 48327.73, 46113.87, 45779.49, 47157.59, 45711.04, 43929.46, 44075.11, 44193.57, 43310.62, 44420.48, 43055.67, 42030.52, 40267.92, 43147.77, 44177.25, 41830.84, 43917.94, 42017.28, 44030.81, 44047.70]
                },
                "summary": {
                    "total_days": 30,
                    "analysis_period": {
                        "start_date": "2025-06-20",
                        "end_date": "2025-07-19"
                    }
                }
            }
        };

        function debugLog(message) {
            const debugOutput = document.getElementById('debugOutput');
            debugOutput.innerHTML += '<p>' + message + '</p>';
            console.log(message);
        }

        // 模拟前端组件的数据处理
        function testChartRendering() {
            debugLog('开始测试图表渲染...');
            
            // 模拟前端接收数据
            const response = apiData;
            
            if (response.success) {
                const correlationData = response.data;
                debugLog('✅ 数据接收成功');
                
                // 检查时间序列数据
                const timeSeriesData = correlationData.time_series;
                if (timeSeriesData && timeSeriesData.dates) {
                    debugLog('✅ 时间序列数据存在');
                    debugLog('日期数量: ' + timeSeriesData.dates.length);
                    debugLog('负荷数据数量: ' + timeSeriesData.load.length);
                    debugLog('最高温度数据数量: ' + timeSeriesData.temp_max.length);
                    debugLog('最低温度数据数量: ' + timeSeriesData.temp_min.length);
                    debugLog('降水量数据数量: ' + timeSeriesData.precip.length);
                    debugLog('湿度数据数量: ' + timeSeriesData.humidity.length);
                    
                    // 检查数据是否完整
                    const allDataComplete = timeSeriesData.dates.length > 0 &&
                                         timeSeriesData.load.length > 0 &&
                                         timeSeriesData.temp_max.length > 0 &&
                                         timeSeriesData.temp_min.length > 0 &&
                                         timeSeriesData.precip.length > 0 &&
                                         timeSeriesData.humidity.length > 0;
                    
                    if (allDataComplete) {
                        debugLog('✅ 所有数据完整，开始渲染图表');
                        renderChart(timeSeriesData);
                    } else {
                        debugLog('❌ 数据不完整');
                    }
                } else {
                    debugLog('❌ 时间序列数据不存在');
                }
            } else {
                debugLog('❌ API响应失败');
            }
        }

        // 渲染图表函数
        function renderChart(timeSeriesData) {
            debugLog('开始渲染图表...');
            
            const chartElement = document.getElementById('testChart');
            if (!chartElement) {
                debugLog('❌ 找不到图表容器元素');
                return;
            }
            
            debugLog('✅ 找到图表容器元素');
            
            // 初始化图表
            const chart = echarts.init(chartElement);
            debugLog('✅ ECharts初始化成功');
            
            const option = {
                title: {
                    text: '气象与负荷时间序列分析（前30天）',
                    left: 'center',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        color: '#ffffff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function(params) {
                        let result = `日期: ${params[0].axisValue}<br/>`
                        params.forEach(param => {
                            let value = param.value
                            let unit = ''
                            if (param.seriesName === '平均负荷') {
                                unit = ' MW'
                            } else if (param.seriesName.includes('温度')) {
                                unit = '°C'
                            } else if (param.seriesName === '降水量') {
                                unit = ' mm'
                            } else if (param.seriesName === '相对湿度') {
                                unit = '%'
                            }
                            result += `${param.seriesName}: ${value}${unit}<br/>`
                        })
                        return result
                    }
                },
                legend: {
                    data: ['平均负荷', '最高气温', '最低气温', '降水量', '相对湿度'],
                    top: 40,
                    textStyle: {
                        fontSize: 14,
                        color: '#ffffff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: timeSeriesData.dates,
                    axisLabel: {
                        rotate: 45,
                        fontSize: 12,
                        color: '#ffffff'
                    },
                    name: '日期',
                    nameLocation: 'middle',
                    nameGap: 50,
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '负荷 (MW)',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value}',
                            color: '#ffffff'
                        },
                        nameTextStyle: {
                            fontSize: 14,
                            color: '#ffffff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '温度 (°C)',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}',
                            color: '#ffffff'
                        },
                        nameTextStyle: {
                            fontSize: 14,
                            color: '#ffffff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: '降水量 (mm) / 湿度 (%)',
                        position: 'right',
                        offset: 80,
                        axisLabel: {
                            formatter: '{value}',
                            color: '#ffffff'
                        },
                        nameTextStyle: {
                            fontSize: 14,
                            color: '#ffffff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '平均负荷',
                        type: 'line',
                        yAxisIndex: 0,
                        data: timeSeriesData.load,
                        itemStyle: { color: '#ff6b6b' },
                        lineStyle: { width: 3 },
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6
                    },
                    {
                        name: '最高气温',
                        type: 'line',
                        yAxisIndex: 1,
                        data: timeSeriesData.temp_max,
                        itemStyle: { color: '#ffa726' },
                        lineStyle: { width: 2 },
                        smooth: true,
                        symbol: 'diamond',
                        symbolSize: 5
                    },
                    {
                        name: '最低气温',
                        type: 'line',
                        yAxisIndex: 1,
                        data: timeSeriesData.temp_min,
                        itemStyle: { color: '#4ecdc4' },
                        lineStyle: { width: 2 },
                        smooth: true,
                        symbol: 'triangle',
                        symbolSize: 5
                    },
                    {
                        name: '降水量',
                        type: 'line',
                        yAxisIndex: 2,
                        data: timeSeriesData.precip,
                        itemStyle: { color: '#45b7d1' },
                        lineStyle: { width: 2, type: 'dashed' },
                        smooth: true,
                        symbol: 'rect',
                        symbolSize: 4
                    },
                    {
                        name: '相对湿度',
                        type: 'line',
                        yAxisIndex: 2,
                        data: timeSeriesData.humidity,
                        itemStyle: { color: '#96ceb4' },
                        lineStyle: { width: 2 },
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 4
                    }
                ]
            };
            
            debugLog('✅ ECharts配置准备完成');
            debugLog('配置详情: ' + JSON.stringify(option, null, 2));
            
            try {
                chart.setOption(option);
                debugLog('✅ 图表渲染成功');
            } catch (error) {
                debugLog('❌ 图表渲染失败: ' + error.message);
            }
            
            // 监听窗口大小变化
            window.addEventListener('resize', () => {
                chart.resize();
            });
        }

        // 页面加载完成后运行测试
        window.addEventListener('load', function() {
            debugLog('页面加载完成，开始测试...');
            testChartRendering();
        });
    </script>
</body>
</html>